<script setup lang="ts">
import { PropType, ref, watch, h} from "vue";
import {ElMessage, ElTable} from "element-plus";
import { scrollToColumn } from '@/utils/gps/device'
import { gpsbus } from '@/utils/gps/event'
import { storeToRefs } from 'pinia'
import useDeviceStore from "@/store/gps/device";
import MaDictColumn from "@/components/ma-dict/ma-dict-column/index.vue";
import {computeSubTitle} from "@/utils/gps/format";
import AddOrUpdate from "@/views/gps/renewal/recharge/add-or-update.vue";

const props = defineProps({
  tableData: {
    type: Array as PropType<any[]>,
    required: true
  }
})
const deviceStore = useDeviceStore()
const { checkedDeviceNodeId } = storeToRefs(deviceStore)

const tableRef = ref<InstanceType<typeof ElTable>>()

watch(
    () => checkedDeviceNodeId.value,
    () => {
      setCurrentRow()
    }
)
/**
 * 设置当前选中行,且定位到目标位置
 */
function setCurrentRow() {
  // nextTick(() => {
  //   const row = checkedDeviceInfoList.value?.find(item => item.imei === checkedDeviceImei.value)
  //   if (!tableRef.value) {
  //     return
  //   }
  //   tableRef.value.setCurrentRow(row)
  //   if (row) {
  //     scrollToColumn(tableRef.value, checkedDeviceInfoList.value!, checkedDeviceImei.value)
  //   }
  // })
}

/**
 *
 * @param row
 */
function rowClickEvent(row) {
  gpsbus.emit('deviceSetRow', row.imei)
}

const addOrUpdateRef = ref()
function openVehicleInfo(imei){
  // console.log(imei)
  addOrUpdateRef.value.init({ imeis: [imei], goodsId: 'plat_0002' })
  // createPopup({
  //   default: (close)=> h(Information, {
  //     imei: props.tableData.imei,
  //     onClose: close,
  //   })
  // }, {
  //   title: "车辆信息",
  //   width: 1000,
  //   height: 800
  // })
}

function getDataList(){

}

</script>

<template>
  <div>
    <el-table ref="tableRef" :data="props.tableData!" border highlight-current-row height="100%" @row-click="rowClickEvent">
      <el-table-column fixed type="index" label="序号" width="60" />
      <ma-dict-column dict-type="" label="所属公司" prop="plateNo"></ma-dict-column>
      <!--    <el-table-column prop="imei" label="分组名称" width="150" />-->
      <el-table-column prop="plateNo" label="设备名称" />
      <el-table-column prop="imei" label="设备序号" dict-type="alarm_type" ></el-table-column>
      <el-table-column prop="platformEndDate" label="平台过期"  />
      <el-table-column prop="platformEndDate" label="天数" >
        <template #default="scope">
          {{ computeSubTitle({ connectionStatus: 'expired', signalUpdateTime: scope.row.platformEndDate }) }}
        </template>
      </el-table-column>
      <el-table-column prop="imei" label="操作" width="120">
        <template #default="{ row }">
          <el-button text type="success" size="small" @click="openVehicleInfo(row.imei)">充值</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>
  </div>
</template>
